<paginate
  ng-if="sortedRows.length"
  list="sortedRows"
  per-page-prop="perPage"
  class="kbnAggTable">
  <div class="kbnAggTable__paginated">
    <table class="table table-condensed">
      <thead data-test-subj="enhanced-paginated-table-header">
        <tr>
          <th
            scope="col"
            ng-repeat="col in columns"
            ng-click="enhancedPaginatedTable.sortColumn($index)"
            kbn-accessible-click
            tabindex="0"
            class="{{ col.class }} {{ col.titleAlignmentClass }}">
            <span ng-bind="::col.title"></span>

            <icon-tip
              ng-if="col.info"
              content="'{{ col.info }}'"
            ></icon-tip>

            <i
              ng-if="col.sortable !== false"
              class="fa"
              ng-class="{
                'fa-sort-asc': enhancedPaginatedTable.sort.columnIndex === $index && enhancedPaginatedTable.sort.direction === 'asc',
                'fa-sort-desc': enhancedPaginatedTable.sort.columnIndex === $index && enhancedPaginatedTable.sort.direction === 'desc',
                'fa-sort': enhancedPaginatedTable.sort.columnIndex !== $index || enhancedPaginatedTable.sort.direction === null
              }">
            </i>
          </th>
        </tr>
      </thead>
      <tbody
        data-test-subj="enhanced-paginated-table-body"
        kbn-enhanced-rows="page"
        kbn-enhanced-rows-min="enhancedPaginatedTable.rowsToShow(perPage, page.length)"
      >
      </tbody>
      <tfoot ng-if="showTotal">
        <tr>
          <th scope="col" ng-repeat="col in columns" class="numeric-value {{ col.totalAlignmentClass }}">{{col.total}}</th>
        </tr>
      </tfoot>
    </table>
  </div>

  <!-- auto-inserted by the paginate directive... -->
  <!-- <paginate-controls></paginate-controls> -->
  <div class="pagination-container" ng-transclude></div>
</paginate>
